<template>
  <view class="flex-col page">
    <view class="flex-col justify-start section">
      <view class="flex-col justify-start items-center text-wrapper"><text class="text text_2">价格计算器</text></view>
    </view>
    <view class="flex-col section_2">
      <view class="flex-row justify-between group">
        <text class="self-center font text text_3">2025-02-11</text>
        <view class="flex-col justify-start items-center text-wrapper_2">
          <text class="font_2 text text_4">生成明细</text>
        </view>
      </view>
      <view class="flex-row group_2">
        <text class="font_3 text">总金额：￥0</text>
        <text class="font_3 text ml-97-5">总数量：￥0</text>
      </view>
      <view class="flex-col group_3">
        <view class="flex-row justify-between relative group_4">
          <view class="flex-col justify-start items-center text-wrapper_3">
            <text class="font_4 text text_5">NO</text>
          </view>
          <view class="section_3"></view>
          <view class="flex-col justify-start items-center text-wrapper_4 pos">
            <text class="font_4 text">名称</text>
          </view>
          <view class="flex-col justify-start items-center text-wrapper_4 pos_2">
            <text class="font_4 text">数量</text>
          </view>
          <view class="flex-col justify-start items-center text-wrapper_4 pos_3">
            <text class="font_4 text">单价</text>
          </view>
          <view class="flex-col justify-start items-center text-wrapper_4 pos_4">
            <text class="font_4 text">总价</text>
          </view>
          <view class="flex-col justify-start items-center text-wrapper_5 pos_5">
            <text class="font_5 text">1</text>
          </view>
          <view class="flex-col justify-start text-wrapper_6 pos_6">
            <text class="font_4 text text_6">中华（硬）</text>
          </view>
          <view class="flex-col justify-start items-center text-wrapper_7 pos_7">
            <text class="font_5 text">1</text>
          </view>
          <view class="flex-col justify-start items-center text-wrapper_8 pos_8">
            <text class="font text text_7">375.0</text>
          </view>
          <image class="image pos_10"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/e4f59c4562b8f8cc89a9592ab2778a9e.png" />
          <view class="flex-col justify-start items-center text-wrapper_8 pos_9">
            <text class="font text text_7">375.0</text>
          </view>
        </view>
        <view class="flex-row justify-evenly">
          <view class="flex-col justify-start items-center text-wrapper_9"><text class="font_5 text">2</text></view>
          <view class="section_4"></view>
          <view class="section_4"></view>
          <view class="section_5"></view>
          <view class="section_4"></view>
          <view class="section_6"></view>
        </view>
        <view class="flex-row justify-center text-wrapper_6">
          <image class="image_2"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/92698f229800d7f56442f95d962409a7.png" />
          <text class="ml-8 font_4 text text_8">增加行</text>
        </view>
      </view>
    </view>
    <view class="flex-col justify-start relative section_7 section_16">
      <view class="flex-row">
        <view class="flex-col items-center group_5 equal-division-item"
          @click="$util.redirectTo('/pages/index_new/index_jiu', {}, 'reLaunch')">
          <image class="image_3"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/02d7f445c0c10dec33dc384baa99b29e.png" />
          <text class="mt-4 font_2 text">首页</text>
        </view>
        <view class="ml-12 flex-col items-center group_5 equal-division-item"
          @click="$util.redirectTo('/pages/index_new/tab_jsq', {}, 'reLaunch')">
          <image class="image_3"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/9b9ee407d67e8d766eac3446626487a4.png" />
          <text class="mt-4 font_2 text text_9">计算器</text>
        </view>
        <view class="ml-12 flex-col items-center group_5 equal-division-item">
          <image class="image_3"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/3e4fab963aab89266abb422ad574de3a.png" />
          <text class="mt-4 font_2 text">客服</text>
        </view>
        <view class="ml-12 flex-col items-center group_5 equal-division-item"
          @click="$util.redirectTo('/pages/index_new/tab_my', {}, 'reLaunch')">
          <image class="image_3"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/91cd88245ca2b6b17f85b06125b04763.png" />
          <text class="mt-4 font_2 text">我的</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },

  methods: {},
};
</script>

<style scoped lang="scss">
.ml-97-5 {
  margin-left: 195rpx;
}

.page {
  background-color: #00000000;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  .section {
    padding: 34rpx 0 20rpx;
    background-color: #ffffff;

    .text-wrapper {
      margin-left: 32rpx;
      margin-right: 10rpx;
      padding: 96rpx 0 18rpx;
      background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/05e0093ead41b70437e3214e578e2e5a.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .text_2 {
        color: #00140d;
        font-size: 28rpx;
        font-family: PingFangSC;
        line-height: 27rpx;
      }
    }
  }

  .section_2 {
    margin: 15rpx 10rpx 0;
    padding: 23rpx 22rpx 895rpx;
    background-color: #ffffff;
    border-radius: 10rpx;

    .group {
      padding-left: 10rpx;
      padding-right: 2rpx;

      .text_3 {
        line-height: 19rpx;
      }

      .text-wrapper_2 {
        padding: 14rpx 0;
        background-color: #00806b;
        border-radius: 24rpx;
        width: 110rpx;
        height: 48rpx;

        .text_4 {
          color: #ffffff;
        }
      }
    }

    .group_2 {
      margin-top: 12rpx;
      padding: 0 10rpx;

      .font_3 {
        font-size: 24rpx;
        font-family: PingFangSC;
        line-height: 23rpx;
        color: #00140d;
      }
    }

    .group_3 {
      margin-top: 22rpx;

      .group_4 {
        padding-bottom: 56rpx;

        .text-wrapper_3 {
          padding: 17rpx 0 20rpx;
          background-color: #00806b;
          width: 68rpx;
          height: 58rpx;
          border-left: solid 1rpx #eeeeee;
          border-right: solid 1rpx #eeeeee;
          border-top: solid 1rpx #eeeeee;
          border-bottom: solid 1rpx #eeeeee;

          .text_5 {
            line-height: 19rpx;
          }
        }

        .section_3 {
          background-color: #00806b;
          width: 68rpx;
          height: 58rpx;
          border-left: solid 1rpx #eeeeee;
          border-right: solid 1rpx #eeeeee;
          border-top: solid 1rpx #eeeeee;
          border-bottom: solid 1rpx #eeeeee;
        }

        .text-wrapper_4 {
          padding: 16rpx 0;
          background-color: #00806b;
          width: 139rpx;
          border-left: solid 1rpx #eeeeee;
          border-right: solid 1rpx #eeeeee;
          border-top: solid 1rpx #eeeeee;
          border-bottom: solid 1rpx #eeeeee;
        }

        .pos {
          position: absolute;
          left: 66rpx;
          top: 0;
        }

        .pos_2 {
          position: absolute;
          left: 204rpx;
          top: 0;
        }

        .pos_3 {
          position: absolute;
          right: 204rpx;
          top: 0;
        }

        .pos_4 {
          position: absolute;
          right: 66rpx;
          top: 0;
        }

        .text-wrapper_5 {
          padding: 20rpx 0;
          background-color: #ffffff;
          width: 68rpx;
          border-left: solid 1rpx #eeeeee;
          border-right: solid 1rpx #eeeeee;
          border-top: solid 1rpx #eeeeee;
          border-bottom: solid 1rpx #eeeeee;
        }

        .pos_5 {
          position: absolute;
          left: 0;
          top: 56rpx;
        }

        .pos_6 {
          position: absolute;
          left: 66rpx;
          top: 56rpx;
        }

        .text-wrapper_7 {
          padding: 17rpx 0 21rpx;
          background-color: #ffffff;
          width: 139rpx;
          border-left: solid 1rpx #eeeeee;
          border-right: solid 1rpx #eeeeee;
          border-top: solid 1rpx #eeeeee;
          border-bottom: solid 1rpx #eeeeee;
        }

        .pos_7 {
          position: absolute;
          left: 204rpx;
          top: 56rpx;
        }

        .text-wrapper_8 {
          padding: 17rpx 0 20rpx;
          background-color: #ffffff;
          width: 139rpx;
          border-left: solid 1rpx #eeeeee;
          border-right: solid 1rpx #eeeeee;
          border-top: solid 1rpx #eeeeee;
          border-bottom: solid 1rpx #eeeeee;

          .text_7 {
            line-height: 19rpx;
          }
        }

        .pos_8 {
          position: absolute;
          right: 204rpx;
          top: 56rpx;
        }

        .image {
          width: 68rpx;
          height: 58rpx;
        }

        .pos_10 {
          position: absolute;
          right: 0;
          bottom: 0;
        }

        .pos_9 {
          position: absolute;
          right: 66rpx;
          top: 56rpx;
        }
      }

      .text-wrapper_9 {
        padding: 17rpx 0 21rpx;
        background-color: #ffffff;
        width: 68rpx;
        height: 58rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;
      }

      .font_5 {
        font-size: 24rpx;
        font-family: PingFangSC;
        line-height: 18rpx;
        color: #00140d;
      }

      .section_4 {
        background-color: #ffffff;
        width: 139rpx;
        height: 58rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;
      }

      .section_5 {
        background-color: #00806b;
        width: 139rpx;
        height: 58rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;
      }

      .section_6 {
        background-color: #ffffff;
        width: 68rpx;
        height: 58rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;
      }

      .text-wrapper_6 {
        padding: 15rpx 0 18rpx;
        background-color: #ffffff;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;

        .text_6 {
          margin-left: 17rpx;
          margin-right: 6rpx;
          color: #011613;
        }

        .image_2 {
          width: 23rpx;
          height: 23rpx;
        }

        .text_8 {
          color: #00806b;
        }
      }

      .font_4 {
        font-size: 24rpx;
        font-family: PingFangSC;
        line-height: 23rpx;
        color: #ffffff;
      }
    }

    .font {
      font-size: 24rpx;
      font-family: PingFangSC;
      line-height: 20rpx;
      color: #00140d;
    }
  }

  .text {
    text-transform: uppercase;
  }

  .section_7 {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 45rpx;
    padding-bottom: 70rpx;
    background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/b0c65f9e1a445110392bf031fbc26685.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .group_5 {
      flex: 1 1 169.5rpx;

      .image_3 {
        width: 48rpx;
        height: 48rpx;
      }

      .text_9 {
        color: #00806b;
      }
    }

    .equal-division-item {
      padding: 10rpx 0;
    }
  }

  .font_2 {
    font-size: 20rpx;
    font-family: PingFangSC;
    line-height: 20rpx;
    color: #011613;
  }
}
</style>